<template>
  <div class="my">
    <img src="/static/images/33g58PICJur.png">
    <button class="login">登录</button>
    <div class="my_view">
      <span class="sp1">我的书影音</span>
      <span class="sp2">登录查看</span>
    </div>
    <div class="cycle">
      <ul>
        <li v-for="(cacale,index) in texs" :key="index">
          <div class="cycle_left">
            <div class="logo">
              <img :src="cacale.imag">
            </div>
            <div class="analyze">
              <p class="analyze_p1">{{cacale.title}}</p>
              <p class="analyze_p2">
                <span class="sp3">{{cacale.zi}}</span>
                {{cacale.look}}
              </p>
            </div>
          </div>
          <div class="cycle_right">
            <div class="tag">
              <p>{{cacale.tag}}</p>
              <p>{{cacale.open}}</p>
            </div>
            <div class="open">
              <span class="goto">{{cacale.goto}}</span>
              <img :src="cacale.lo">
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  computed: {},
  data() {
    return {
      texs: [
        {
          imag: "/static/images/bofang.png",
          title: "观影分析",
          zi: 0,
          look: "看过",
          tag: "标记10部影片",
          open: "开启观影分析",
          goto: "立即开启",
          lo: "/static/images/xiangyou.png"
        },
        {
          imag: "/static/images/dushu.png",
          title: "读书分析",
          zi: 0,
          look: "读过",
          tag: "标记10本书",
          open: "开启读书分析",
          goto: "立即开启",
          lo: "/static/images/xiangyou.png"
        },
        {
          imag: "/static/images/yinyue.png",
          title: "音乐分析",
          zi: 0,
          look: "听过",
          tag: "标记10张唱片",
          open: "开启音乐分析",
          goto: "立即开启",
          lo: "/static/images/xiangyou.png"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style>
.my {
  width: 100%;
  height: 400rpx;
  position: relative;
}
.my > img {
  width: 100%;
  height: 400rpx;
}
.login {
  width: 300rpx;
  height: 100rpx;
  border-radius: 30rpx;
  font-size: 40rpx;
  background-color: #ffffff;
  border: none;
  position: absolute;
  top: 35%;
  left: 30%;
}
.my_view {
  display: flex;
  align-items: center;
  height: 120rpx;
}
.sp1 {
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 30rpx;
}
.sp2 {
  font-size: 20rpx;
  color: #bfbfbf;
  margin-left: 60%;
  margin-right: 30rpx;
}
/* 列表标签 */
.cycle ul li {
  height: 150rpx;
  display: flex;
}
.cycle_left {
  display: flex;
}
.logo {
  height: 100%;
  display: flex;
  align-items: center;
}
.logo img {
  width: 64rpx;
  height: 64rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
}
.analyze {
  height: 100%;
  line-height: 60rpx;
}
.analyze_p1 {
  font-size: 28rpx;
}
.analyze_p2 {
  font-size: 26rpx;
}
.sp3 {
  font-size: 30rpx;
}
.cycle_right {
  display: flex;
  margin-left: 120rpx;
}
.tag {
  line-height: 60rpx;
}
.tag p {
  font-size: 26rpx;
  color: #d6d6d6;
}
.open {
  height: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 40rpx;
}
.open img {
  width: 50rpx;
  height: 50rpx;
}
.goto {
  width: 120rpx;
  height: 45rpx;
  color: #000000;
  font-size: 24rpx;
  background: #dfdfdf;
  text-align: center;
  margin-right: 10rpx;
}
</style>
